<script setup lang="ts">
  import { ref } from 'vue';
  import { Persistent } from '@/utils/cache/persistent';
  import { SN_KEY } from '@/enums/cacheEnum';
  import { RangeValue } from 'ant-design-vue/es/vc-picker/interface';
  import dayjs from 'dayjs';
  import { exportDeviceDayPowerHistoryApi, exportDeviceMonthPowerHistoryApi } from '@/api/hc/data';
  import { PageWrapper } from '@/components/Page';

  let sn = ref<string>(Persistent.getLocal(SN_KEY) || '');
  var list = ref<Array>([]);

  function snChange() {
    Persistent.setLocal(SN_KEY, sn.value);
  }

  let startTs: number = dayjs().subtract(2, 'day').valueOf();
  let endTs: number = dayjs().valueOf();
  const onRangeChange = (dates: RangeValue, dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
      startTs = dayjs(dateStrings[0]).valueOf();
      endTs = dayjs(dateStrings[1]).valueOf();
      console.log('From: ', startTs, ', to: ', endTs);
    } else {
      console.log('Clear');
    }
  };

  function downloadDay() {
    exportDeviceDayPowerHistoryApi({
      sn: sn.value,
      startTs: startTs,
      endTs: endTs,
    });
  }

  function downloadMonth() {
    exportDeviceMonthPowerHistoryApi({
      sn: sn.value,
      startTs: startTs,
      endTs: endTs,
    });
  }
</script>

<template>
  <PageWrapper>
    <a-input class="w-xs" v-model:value="sn" @change="snChange" />
    <a-range-picker
      style="width: 400px"
      show-time
      :default-value="[dayjs(startTs), dayjs(endTs)]"
      format="YYYY/MM/DD HH:mm:ss"
      @change="onRangeChange"
    />
    <a-button type="primary" @click="downloadDay">日下载</a-button>
    <a-button type="primary" @click="downloadMonth">月下载</a-button>
    <a-list item-layout="horizontal" :data-source="list">
      <template #renderItem="{ item }">
        <a-list-item>
          <a-list-item-meta :description="item.logText" />
        </a-list-item>
      </template>
    </a-list>
  </PageWrapper>
</template>

<style scoped lang="less"></style>
